<template>
  <Card title="每月完成服务额" class="enter-y" :class="['!my-4']">
    <div ref="chartRef" style="height:300px; width:100%"></div>
  </Card>
</template>
<script lang="ts">

import { Card } from 'ant-design-vue';
import { defineComponent, ref, Ref, watch, } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

export default defineComponent({
  components: { Card },
  props: {
    loading: Boolean,
    chartData: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
    watch(
      () => props.loading,
      () => {
        if (props.loading) {
          return;
        }
        //begin to set options
        console.log('ContractMonthBar.vue->watch->setOptions');
        setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                width: 1,
                color: '#019680',
              },
            },
          },
          legend: {
            data: ['完成服务额',]
          },
          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
          xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',
            ],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '每月完成服务额',
              type: 'bar',
              barMaxWidth: 80,
              data: props.chartData,
            },
          ],

        });
        //end to set options
      },
      { immediate: true }
    );

    return { chartRef };
  }
});

</script>
